<template>
  <div id="app">
    <div class="big">
      <div class="heade">
        <div class="tb">
          <div class="nav">
            <div @click="back1">
              <img src="../assets/img/教育APP切图/fh.png" alt="" />
            </div>
            <h3>我的课程</h3>
          </div>
        </div>
        <video
          :src="src"
          autoplay
          controls
          :poster="poster"
          loop
          class="vide"
        ></video>

        <div class="h1">
          <div>
            <span class="h11">字体设计</span>
            <span class="h12"></span>
          </div>
          <h3 style="font-size: 3rem">难度等级. 中级 | 时长：34:55</h3>
        </div>
      </div>
      <div class="st">
        <div class="st1">
          <p :class="{ add: line === 0 }" @click="line = 0">目录</p>
          <p :class="{ add: line === 1 }" @click="line = 1">详情</p>
          <p :class="{ add: line === 2 }" @click="line = 2">
            评论( <span>{{ num }}</span> )
          </p>
        </div>
        <ul class="st2" v-show="line === 0">
          <li v-for="(r, i) in muList" :key="r.ID" @click="mulu(i)">
            <img
              src="../assets/img/教育APP切图/学习/组6@2x.png"
              :class="{ appear: appearr === i }"
            />
            <span>{{ r.Vname }}</span>
          </li>
        </ul>
        <ul class="st2" v-show="line === 1">
          <li>{{ xiang }}</li>
        </ul>
        <ul class="st2" v-show="line === 2" >
          <li class="ply" v-for="(r,i) in pl" :key='i'>
            <p>{{r.userName}}</p>
            <p>{{r.createAt}}</p>
            <p style="word-break: break-all">{{r.evaluate}}</p>
          </li>
        </ul>
      </div>
      <div class="gm">
        <div>
          <span class="gm1"
            ><img src="../assets/img/教育APP切图/学习/形状1@2x.png" alt=""
          /></span>
          <p>收藏</p>
        </div>
        <button class="bt2" v-show="gobuy" @click="ljgm">立即购买</button>
        <button class="bt1" v-show="!gobuy">已购买</button>
        <div @click="back">
         
            <span class="gm2"><img src="../assets/img/教育APP切图/学习/pj.png" alt=""/></span>
            <p>评论</p>
          
        </div>
      </div>
    </div>
    <div class="t4" v-show="tc">
        <div class="tc1">
            {{text}}
            <!-- 购买 -->
            <button @click="dl" v-show="qued">确定</button>
            <button @click="dl1" v-show="qued1">确定</button>
        </div>
    </div>

  </div>
</template>

<script>
import {goumai} from '@/api/video'
export default {
  name: "couresVideo",
  data() {
    return {
      line: 0,
      ID: "",
      name: "",
      poster: "",
      src: "",
      muList: [],
      num: "",
      appearr: 0,
      vist: [],
      xiang: "",
      pl:[],
      gobuy:true,
      isbuy:'',
      text:'',
      tc:false,
      qued:true,
      qued1:false
    };
  },
  methods: {
    back1(){
          // this.$router.push({
          //     path:sessionStorage.getItem('addres')
          // })
          this.$router.go(-1)
      },
    back() {
        if (!sessionStorage.getItem("user")) {
            this.tc=true
            this.text='未登录，请先登录'
        }else{
              this.$router.push({
              path:'/CommenT',
              name:'评论',
              query:{
                  courseId:this.ID
              }
          })
        }
    
    },
    dl1(){
        this.tc=false
    },
    mulu(e) {
      this.appearr = e;
      this.src = this.muList[e].Vurl;
      if (!sessionStorage.getItem("user")) {
          this.text="未登录，请先登录";
          this.tc=true
      }else{
          if (this.isbuy===false) {
          this.text="未购买，请先购买";
          this.qued=false
          this.tc=true
          this.qued1=true
      }
      }
      
    },
    dl(){
        this.$router.push({
                path:'/myLogin',
            })
    },
    // 购买按钮
    ljgm(){
        if (!sessionStorage.getItem("user")) {
          this.text="未登录，请先登录";
          this.tc=true
      }else{
          goumai({
              userName:this.name,
              courseId: this.ID,
          }).then(res=>{
              if (res.success==="购买成功") {
                this.isbuy=true      
                this.gobuy=false            
              }
          }).catch(err=>{
              console.log(err);
          })
    
    }
          }
  },
  mounted() {
    this.name = sessionStorage.getItem("user")
      ? JSON.parse(sessionStorage.getItem("user")).userName
      : "",
      this.ID = this.$route.query.courseId;
    this.$axios({
      url: "/api/Handler/CourseHandler?action=learn",
      methods: "get",
      params: {
        userName: this.name,
        courseId: this.ID,
      },
    })
      .then((res) => {
        if (res.success === "成功") {
          console.log(res);
          this.src = res.data.Vlist[0].Vurl;
          this.poster = res.data.Cpic;
          this.muList = res.data.Vlist;
          this.num = res.data.evaluate.length;
          this.xiang = res.data.Cdetails;
          this.pl=res.data.evaluate
          this.isbuy=res.data.isBuy
          if (this.isbuy===false) {
              this.gobuy=true
          }else{
              this.gobuy=false
          }

        }
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>
<style lang="scss" scoped>
#app{
    height: 100vh;
.big {
  background: #f2f2f2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  .heade {
    width: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .tb {
    width: 100%;
    background: #5064eb;
    padding: 0 3rem;
  }

  .nav {
    width: 40rem;
    height: 8.7rem;
    display: flex;
    font-size: 3rem;
    justify-content: space-between;
    align-items: center;
    color: #fff;

    img {
      width: 3.7rem;
      height: 2.4rem;
    }
  }

  video {
    width: 100%;
    height: 41rem;
  }

  .h1 {
    width: 100%;
    height: 16rem;
    background: #fff;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    > {
      h3 {
        color: #b3b3b3;
      }

      div > span {
        display: inline-block;
      }
    }
  }

  .h11 {
    width: 13.4rem;
    height: 4.4rem;
    background-color: #145aee;
    border-radius: 5rem;
    text-align: center;
    color: #fff;
    line-height: 4.4rem;
    font-size: 2.4rem;
  }

  .h12 {
    font-size: 3.4rem;
    margin-left: 2rem;
  }

  /* st */

  .st {
    width: 100%;
    background: #fff;
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .st1 {
    width: 100%;
    height: 8.7rem;
    border-bottom: 0.1rem solid #f2f2f2;
    display: flex;
    justify-content: space-around;
    font-size: 2.8rem;

    p {
      height: 8.7rem;
      line-height: 8.7rem;
    }
    .add {
      border-bottom: 0.5rem solid #145aee;
    }
  }

  .st2 {
    overflow: auto;
    height: 50rem;
    .ply{
          display: flex;
          flex-direction: column;
      }
    li {
      display: flex;
      > img {
        width: 3rem;
        height: 3rem;
        display: none;
        margin-right: 2rem;
      }
      .appear {
        display: block;
      }
      
      font-size: 3rem;
      margin-bottom: 2rem;
    }

    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 2rem;
  }

  /* gm */

  .gm {
    width: 100%;
    height: 9.8rem;
    background: #fff;
    border-top: 0.1rem solid #ccc;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;

    button {
      width: 44.4rem;
      height: 7.8rem;
      border-radius: 5rem;
      background: #145aee;
      color: #fff;
      font-size: 3.4rem;
    }

    div {
      width: 4.4rem;
      height: 7.3rem;
      font-size: 2.2rem;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
    }

    img {
      width: 4.1rem;
      height: 4rem;
    }

    .bt1 {
      background: #ccc;
    }
  }
 

}
.t4 {
    width: 100%;
    height: 100%;
    background:rgba($color: #000000, $alpha: 0.5);
    position: fixed;
    left: 0;
    top: 0;
    // display: none;
    .tc1 {
    margin: auto;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    font-size: 3rem;
    width: 68rem;
    height: 25rem;
    background: rgba($color: #fff, $alpha: 0.8);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    border-radius: 5rem;
    button{
        width: 12rem;
        height: 6rem;
        background: #fff;
        border-radius: 2rem;
        font-size: 3rem;
    }
    
  }
  }

  
}

</style>